<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-lg-2"
      style="border-right: 1px solid rgba(0, 0, 0, 0.1)">
      <div
        class="d-lg-none d-flex py-2 px-4 align-items-center text-body sidebar-collapsed"
        (click)="sidebarCollapsed = !sidebarCollapsed"
        role="button"
      >
        <span class="mr-auto">Menu</span>
        <button
          class="btn btn-link p-0"
          aria-controls="doc-nav"
          [attr.aria-expanded]="!sidebarCollapsed"
          aria-label="Toggle documentation navigation"
        >
          <svg class="align-middle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
        </button>
      </div>
      <ngbd-side-nav
        id="doc-nav"
        [ngbCollapse]="sidebarCollapsed"
        class="d-lg-block my-3 collpase sidebar"
      ></ngbd-side-nav>
    </div>

    <div class="col-12 col-lg-10">
      <header class="bg-light pt-4 pb-md-5 px-4 px-lg-5 d-flex d-md-block align-items-center title">
        <h1 class="mb-4 mr-auto mr-md-none">{{ component }}</h1>

        <ul class="nav nav-tabs px-4 px-lg-5 content-tabset" [class.justify-content-start]="isLargeScreenOrLess" [class.justify-content-end]="isSmallScreenOrLess">
          <li class="nav-item" *ngIf="overview">
            <a
              class="nav-link"
              [class.active]="activeTab === 'overview'"
              [routerLink]="['/components', component.toLowerCase(), 'overview']"
            >Overview</a>
          </li>

          <li *ngIf="isLargeScreenOrLess" class="nav-item" ngbDropdown [placement]="isSmallScreenOrLess ? 'bottom-right' : 'bottom-left'">
            <a class="nav-link" [routerLink]="['..', 'examples']" [class.active]="activeTab === 'examples'">
              Examples
              <a class="dropdown-toggle" ngbDropdownToggle><span class="caret"></span></a>
            </a>
            <div
              class="dropdown-menu"
              [class.dropdown-menu-right]="isMobile"
              ngbDropdownMenu
              >
               <a [routerLink]="['/components', component.toLowerCase(), 'examples']" [fragment]="demo.demo" *ngFor="let demo of demos" class="dropdown-item">{{demo.demoTitle}}</a>
            </div>
          </li>

          <li *ngIf="!isLargeScreenOrLess" class="nav-item">
            <a class="nav-link" [routerLink]="['..', 'examples']" [class.active]="activeTab === 'examples'">
              Examples
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" [routerLink]="['..', 'api']" [class.active]="activeTab === 'api'">Api</a>
          </li>
        </ul>
      </header>

      <section class="row py-5 px-2 px-md-4 px-lg-5">
        <div
          [ngSwitch]="activeTab"
          class="col-12 col-xl-9 px-md-0 pr-xl-4"
        >
          <ng-container *ngSwitchCase="'overview'">
            <ng-content select="[ngbdOverview]"></ng-content>
          </ng-container>

          <ng-container *ngSwitchCase="'examples'">
            <ng-content select="ngbd-example-box"></ng-content>
            <div class="examples-legend">
              <strong>Legend</strong>
              <p>
                <ng-container *ngFor="let type of fileTypes">
                  <small class="badge {{type[2]}} mr-2">{{type[0]}}</small>{{type[1]}}<br>
                </ng-container>
              </p>
            </div>
          </ng-container>

          <ng-container *ngSwitchCase="'api'">
            <ng-content select="ngbd-api-docs"></ng-content>
            <ng-content select="ngbd-api-docs-class"></ng-content>
            <ng-content select="ngbd-api-docs-config"></ng-content>
          </ng-container>
        </div>

        <div
          [ngSwitch]="activeTab"
          class="col-12 col-xl-3 d-none d-xl-block contextual-nav"
        >
          <ul
            *ngSwitchCase="'overview'"
            class="nav flex-column text-muted pt-4"
          >
            <li *ngFor="let section of overviewSections" class="nav-item">
              <a class="nav-link" [routerLink]="['/components', component.toLowerCase(), 'overview']" [fragment]="section.fragment">{{section.title}}</a>
            </li>
          </ul>

          <ul
            *ngSwitchCase="'examples'"
            class="nav flex-column text-muted pt-4"
          >
            <li *ngFor="let demo of demos" class="nav-item">
              <a class="nav-link" [routerLink]="['/components', component.toLowerCase(), 'examples']" [fragment]="demo.demo">{{demo.demoTitle}}</a>
            </li>
          </ul>

          <ul *ngSwitchCase="'api'" class="nav flex-column text-muted pt-4">
            <li *ngFor="let api of apiDocs" class="nav-item">
              <a class="nav-link" [routerLink]="['/components', component.toLowerCase(), 'api']" [fragment]="api.apiDocs.className">{{api.apiDocs.className}}</a>
            </li>
            <li *ngIf="apiDocsClass.length" class="nav-item">&nbsp;</li>
            <li *ngFor="let api of apiDocsClass" class="nav-item">
              <a class="nav-link" [routerLink]="['/components', component.toLowerCase(), 'api']" [fragment]="api.apiDocs.className">{{api.apiDocs.className}}</a>
            </li>
            <li *ngIf="apiDocsConfig.length" class="nav-item">&nbsp;</li>
            <li *ngFor="let api of apiDocsConfig" class="nav-item">
              <a class="nav-link" [routerLink]="['/components', component.toLowerCase(), 'api']" [fragment]="api.apiDocs.className">{{api.apiDocs.className}}</a>
            </li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</div>
